<template>
  <c-loading :loading="loading">
    <view class="container split">
      <view v-for="(item, i) in list" :key="item.id" class="card">
        <view class="address" @tap="onSelect(item)">
          <view class="select" v-if="options.select">
            <c-radio></c-radio>
          </view>
          <view class="flex">
            <view class="name">{{ item.consignee }}</view>
            <view class="mobil">{{ item.consigneePhone }}</view>
          </view>
          <view class="detail row2">{{ item.region?.join(' ') }} {{ item.address }}</view>
        </view>
        <view class="address-footer">
          <view class="grow">
            <c-radio :checked="item.isDefault" fill @change="setDefault(item, i)">{{ item.isDefault ? '默认地址' : '设为默认' }}</c-radio>
          </view>
          <view class="link-btn" hover-class="view-hover" @tap="toEdit(item)">编辑</view>
          <view class="link-btn danger" hover-class="view-hover" @tap="onDelete(item, i)">删除</view>
        </view>
      </view>
      <c-empty v-if="!list.length"></c-empty>
      <view class="fixed-footer shadow">
        <c-button type="primary" @tap="toEdit()">添加地址</c-button>
      </view>
      <view class="end"></view>
    </view>
  </c-loading>
</template>
<script setup>
import { CButton, CLoading, CEmpty, CRadio } from '@/components';
import { useLoading, useRouter } from '@/hooks';
import { View } from '@tarojs/components';
import api from '@/api';
import { ref } from 'vue';
import { usePullDownRefresh, stopPullDownRefresh } from '@tarojs/taro';
import toast from '@/utils/toast';
const router = useRouter();

const list = ref([]);

const { loading, restart, options } = useLoading(async options => {
  list.value = await api.user.userAddressGetList();
});

const toEdit = (item, i) => {
  router.push('./edit', item).then(() => {
    restart();
  });
};

const onSelect = item => {
  if (options.value.select) {
    router.back(item);
  }
};
const setDefault = async (item, i) => {
  if (item.isDefault == true) return;
  // loading 写法
  // await toast.loading.lock(() => api.user.userAddressSetDefault({ id: item.id })).error();
  await api.user.userAddressSetDefault({ id: item.id }).error();
  item.isDefault = true;
  list.value.forEach((a, index) => {
    if (index != i) a.isDefault = false;
  });
};

const onDelete = (item, i) => {
  console.log(item);
  toast.confirm('确认删除').then(() => {
    toast.loading
      .lock(() => api.user.userAddressDelete({ id: item.id }))
      .then(() => list.value.splice(i, 1))
      .toast('删除成功');
  });
};
usePullDownRefresh(async () => {
  await restart();
  stopPullDownRefresh();
});
</script>
<style lang="scss">
.address {
  padding: 10px 10px 20px;
  position: relative;
  .name {
    font-weight: bold;
    margin-right: 15px;
  }
  .detail {
    margin-top: 20px;
    font-size: 28px;
    color: var(--color-default);
  }
  .select {
    position: absolute;
    right: -10px;
    top: 0px;
  }
}
.address-footer {
  display: flex;
  margin-top: 20px;
  padding-top: 15px;
  border-top: var(--onepx) solid var(--color-line);
  align-items: center;
  font-size: 24px;
}
</style>
